<template>
	<view class="store_detail_page">
		<u-navbar autoBack fixed placeholder bgColor="#fff">
			<template #left>
				<view class="navBar">
					<u-icon name="arrow-left" color="#000" size="18"></u-icon>
					<text class="nav_title">{{shopDetail.name}}</text>
				</view>
			</template>
		</u-navbar>
		<scroll-view scroll-y class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }">
			<view class="card_list">
        <view class="card_box">
          <view class="card_title">店铺名称<text>*</text></view>
          <view class="card_content">
            <text>{{shopDetail.name}}</text>
          </view>
        </view>
        <view class="card_box">
          <view class="card_title">店铺类型<text>*</text></view>
          <view class="card_content">
            <text>{{shopDetail.shopType}}</text>
          </view>
        </view>
        <view class="card_box">
          <view class="card_title title_fuza">
            <view class="title_top">
              <view>地图位置<text>*</text></view>
            </view>
            <view class="title_bottom">位置由误会影响导航，请仔细确认</view>
          </view>
          <view class="card_content">
            <map style="width: 100%; height: 240rpx; border-radius: 16rpx; overflow: hidden" :latitude="latitude" :longitude="longitude" :markers="markers" />
          </view>
          <view class="card_title" style="margin-top: 32rpx;">地址<text>*</text></view>
          <view class="card_content">
            <text>{{shopDetail.address}}</text>
          </view>
          <u-divider></u-divider>
          <view class="card_title">归属景区<text>*</text></view>
          <view class="card_content">
            <text>{{shopDetail.jingquName}}</text>
          </view>
        </view>
        <view class="card_box">
          <view class="card_title title_fuza">
            <view class="title_top">
              <view>门脸照片<text>*</text></view>
            </view>
            <view class="title_bottom">建议打开手机定位现场拍摄</view>
          </view>
          <view class="card_content">
            <u-image width="320rpx" height="200rpx" shape="square" :radius="16" :src="shopDetail.doorImg"></u-image>
          </view>
        </view>
        <view class="card_box">
          <view class="card_title title_fuza">
            <view class="title_top" @click="showBusinessTime = !showBusinessTime">
              <view>营业时间</view>
              <template>
                <u-icon v-if="showBusinessTime" name="arrow-up"></u-icon>
                <u-icon v-else name="arrow-down"></u-icon>
              </template>
            </view>
            <view v-if="showBusinessTime" class="title_bottom">正确的营业时间，可提升店铺到客率</view>
          </view>
          <view v-if="showBusinessTime" class="card_content">
            <text>{{shopDetail.businessTime}}</text>
          </view>
        </view>
        <view class="card_box">
          <view class="card_title">姓名<text>*</text></view>
          <view class="card_content">
            <text>{{shopDetail.applyName}}</text>
          </view>
          <u-divider></u-divider>
          <view class="card_title">手机号码<text>*</text></view>
          <view class="card_content">
            <text>{{shopDetail.applyPhone}}</text>
          </view>
        </view>
			</view>
		</scroll-view>
		<view class="footer">
			<u-button type="primary" shape="circle" text="返回" @click="back"></u-button>
		</view>
	</view>
</template>

<script>
  import {getQiyeDetail} from "@/api/shop";
  import {getSystemDictTypeData} from "@/api/system";
  import {MERCHANT_TYPE} from "@/utils/enum";
  import shop from "@/pages/shop/shop.vue";

  export default {
    onLoad(option) {
      this.getQiyeDetail(option.shopId)
    },
		data() {
			return {
        shopDetail: {},
        showBusinessTime: true,
        // 地图位置
        latitude: 39.909,// 默认纬度
        longitude: 116.39742,// 默认经度(北京天安门)
        markers: [{
          id: 110,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/img/shop/location_icon.png',
          width: 20,
          height: 20
        }]
			}
		},
		computed: {
      shop() {
        return shop
      },
			navBarHeight () {
				const platform = uni.getSystemInfoSync().platform
				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				let navHeight = 0
				if (['ios', 'devtools'].includes(platform)) {
					navHeight = 44
				} else {
					navHeight = 48
				}
				return navHeight + statusBarHeight
			}
		},
		methods: {
      async getQiyeDetail (shopId) {
        const { code, data, msg } = await getQiyeDetail({
          id: shopId
        })
        if (code === 200) {
          this.shopDetail = data
          this.shopDetail.shopType = await this.getShopType(data.type)
          const [longitude, latitude] = data.addressDetail.split(',')
          this.longitude = longitude
          this.latitude = latitude
          this.markers.map(marker => {
            marker.longitude = longitude
            marker.latitude = latitude
          })
        } else {
          this.$modal.msgError(msg)
        }
      },
      async getShopType (type) {
        const { code, data } = await getSystemDictTypeData(MERCHANT_TYPE)
        if (code === 200) {
          return data.find(item => item.dictValue === type).dictLabel
        }
        return ''
      },
      back () {
        uni.navigateBack()
      }
		}
	}
</script>

<style lang="scss" scoped>
	.store_detail_page {
		width: 100vw;
		height: 100vh;
		background-color: #F3F3F3;
		.navBar {
			display: flex;
			align-items: center;
			.nav_title {
				font-size: 36rpx;
				font-weight: 400;
				color: #000000;
				margin-left: 8rpx;
			}
		}
		.content {
      padding: 0 16rpx;
			.card_list {
				padding-bottom: 184rpx;
			}
			.card_box {
				background-color: #fff;
				display: flex;
				flex-direction: column;
				border-radius: 16rpx;
				padding: 32rpx;
				margin-top: 16rpx;
				.card_title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					& > text {
						font-size: 32rpx;
						font-weight: 400;
						color: #ED6F51;
						margin-left: 8rpx;
					}
				}
				.title_fuza {
					display: flex;
					flex-direction: column;
					.title_top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						text {
							font-size: 32rpx;
							font-weight: 400;
							color: #ED6F51;
							margin-left: 8rpx;
						}
					}
					.title_bottom {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 4rpx;
					}
				}
				.card_content {
          margin-top: 40rpx;
					font-size: 32rpx;
					font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 144rpx;
			background: #FFFFFF;
      padding: 18rpx 24px 0;
			border: 1rpx solid #F3F3F3;
      z-index: 99;
		}
	}
</style>
